<script setup lang="ts">
import { useVModel } from "@vueuse/core";
import UserTag from "./UserTag.vue";
import UserPicker, { type ModelValueType } from "./UserPicker.vue";
import { useFormDisabled, useFormSize } from "element-plus";
import Plus from "~icons/ep/plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { type CSSProperties } from "vue";
import { computed, ref } from "vue";
export interface UserSelectorProps {
  modelValue: ModelValueType;
  placeholder?: string;
  multiple?: boolean;
  disabled?: boolean;
  style?: CSSProperties;
}

const $props = withDefaults(defineProps<UserSelectorProps>(), {
  multiple: false,
  disabled: false,
  placeholder: "请选择用户"
});
const $emits = defineEmits<{
  (e: "update:modelValue", modelValue: ModelValueType): void;
  (e: "onSelected", userInfo: object): void;
  (e: "onClose", username: string): void;
}>();
const value = useVModel($props, "modelValue", $emits);
const valueArr = computed<Object[]>(() => {
  if (!value.value) return [];
  console.log("valueArr!!!!", value.value);
  return Array.isArray(value.value) ? value.value : [value.value];
});
const userPickerRef = ref<InstanceType<typeof UserPicker>>();
const formDisabled = useFormDisabled();
const formSize = useFormSize();
const disabled = computed<boolean>(() => {
  return formDisabled.value || $props.disabled;
});
const openUserPicker = () => {
  userPickerRef.value?.open();
};
const onClose = (username: string) => {
  if (!value.value) return;
  if ($props.multiple && Array.isArray(value.value)) {
    value.value.splice(value.value.indexOf(username), 1);
  } else {
    value.value = null;
  }
  $emits("onClose", username);
};
const handleSelected = users => {
  $emits("onSelected", users); // 将事件冒泡到父组件
};
</script>

<template>
  <user-picker
    ref="userPickerRef"
    :multiple="multiple"
    v-model="value"
    @on-selected="handleSelected"
  />
  <div class="user-wrapper">
    <el-button
      class="user-but-item"
      :size="formSize"
      :disabled="disabled"
      :icon="useRenderIcon(Plus)"
      @click="openUserPicker"
      circle
    />
    <div v-if="valueArr && valueArr.length > 0">
      <user-tag
        v-for="item in valueArr"
        :closable="!disabled"
        :key="item.id"
        :user="item"
        @close="onClose"
      />
      <el-text v-show="!value || value.length === 0" class="placeholder">
        {{ placeholder }}
      </el-text>
    </div>
  </div>
</template>

<style scoped lang="scss">
.el-tag {
  padding: 0 3px;
}

.user-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-gap: 7px;
  gap: 7px;

  .placeholder {
    color: var(--el-text-color-placeholder);
  }

  .user-but-item {
    border-style: dashed;

    &:hover {
      border-style: solid;
    }
  }
}
</style>
